<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <style type="text/css">
        body {
            width:100%;
            height:100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font:sans-serif;
    font-size:small;
    }
    #map {
    width: 800px;
    height: 600px;
    border: 1px solid black;
    padding: 0px;
    margin:0px auto;
    margin-top:30px;
    position:relative;
    }
    </style>

    <!--script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script-->
    <script type="text/javascript" src="http://xepec.ru/openl/openlayers/lib/OpenLayers.js"></script>
    
    <script type="text/javascript">
      var lon = 4187888;
      var lat= 7509599;
    var zoom = 10;
    var map, layer;

        function init(){
              map = new OpenLayers.Map('map',
	      {'maxResolution': 360/512/16,
	       'numZoomLevels':15,
	        controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine() ]});	
//            map = new OpenLayers.Map( 'map' );
        map.addControl(new OpenLayers.Control.Permalink());        

        var wms = new OpenLayers.Layer.WMS( "WMS",

/*
change here to suite your setup
*/
                "http://95.31.7.69/mapserver?",
                {map: 'osm/osm.map', 


        layers: 'default', 
        format: 'aggpng24',
//	format: 'svg',
        transparent: 'off'},
                {maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                scales: [5000,10000,25000,50000,100000,250000,500000,
                         1000000,2500000,5000000,10000000,25000000,50000000,100000000],
                units: 'm',
                projection:new OpenLayers.Projection("EPSG:900913"),
                gutter:0,
                ratio:1,
                wrapDateLine: true,
                isBaselayer:true,
                singleTile:true,
                transitionEffect:'resize'} );
//var vector = new OpenLayers.Layer.Vector("Editable Vectors");



////////////////////////////////////////////////////////////////////////////////////////

            markers = new OpenLayers.Layer.Markers("zibo");
            map.addLayer(markers);


 AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
            'autoSize': true
        });
        OpenLayers.Popup.FramedCloud.prototype.autoSize = false;

        AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
            'autoSize': true
        });
	
	
	
	
var layer, markers;

var lonn, latn;

lonn= 4187888;
latn= 7509599;
ll = new OpenLayers.LonLat(lonn,latn);
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br></div>' 
            addMarker(ll, popupClass, popupContentHTML);
addcolorMarker(lonn, latn, popupClass, popupContentHTML);

lonn= 4206000;
latn= 7492117;
            popupClass = AutoSizeAnchored;
            popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br></div>' 
            addMarker(ll, popupClass, popupContentHTML);
addcolorMarker(lonn, latn, popupClass, popupContentHTML);

lonn= 4215028;
latn= 7541010;
            popupClass = AutoSizeFramedCloud;
            popupContentHTML = "<div style=\"background-color:red;\">Popup.FramedCloud<br>autosize<br>overflow<br>Old man down, way down down, down by the docks of the city.<br>Blind and dirty, asked me for a dime, a dime for a cup of coffee.<br>I got no dime but I got some time to hear his story.<br>My name is August West, and I love my Pearly Baker best more than my wine.<br>More than my wine - more than my maker, though he's no friend of mine.<br><br>Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,<br>The other half found me stumbling 'round drunk on Burgundy wine.<br></div>";
            addMarker(lonn, latn, popupClass, popupContentHTML, false, true);
addcolorMarker(lonn, latn, popupClass, popupContentHTML);


function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
	var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
            //var feature = new OpenLayers.Feature(markers, ll);
	    var feature = new OpenLayers.Feature.Vector(
		 new OpenLayers.Geometry.Point(lonn, latn),
		   {some:'data'},
		   {externalGraphic: 'http://xepec.ru/openl/openlayers/img/marker-gold.png', graphicHeight: 21, graphicWidth: 16});
		vectorLayer.addFeatures(feature);
		
		
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";
                    
            var marker = feature.createMarker();

            var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            marker.events.register("mousedown", feature, markerClick);

            markers.addMarker(marker);
	    
	    
	    
	    
	var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
        var feature = new OpenLayers.Feature.Vector(
	  new OpenLayers.Geometry.Point(lonn, latn),
	   {some:'data'},
	   {externalGraphic: 'http://xepec.ru/openl/openlayers/img/marker-gold.png', graphicHeight: 21, graphicWidth: 16});
	vectorLayer.addFeatures(feature);
	
	vectorLayer.events.register("mousedown", feature, markerClick);
	
	map.addLayer(vectorLayer);
        }



 function addcolorMarker(lonn, latn, popupClass, popupContentHTML, closeBox, overflow) 
{
	var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
/////////////////popup/////////////////////////////////////
		var ll = "lon = "+lonn+", lat = "+latn;
	//	alert(ll);
            var feature = new OpenLayers.Feature(markers, ll); 
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";

	    var markerClick = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup(this.closeBox);
                    map.addPopup(this.popup);
                    this.popup.show();
                } else {
                    this.popup.toggle();
		    alert(popupContentHTML);
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            vectorLayer.events.register("mousedown", feature, markerClick);




/////////////////popup/////////////////////////////////////


	var feature = new OpenLayers.Feature.Vector(
	  new OpenLayers.Geometry.Point(lonn, latn),
	   {some:'data'},
	   {externalGraphic: 'http://xepec.ru/openl/openlayers/img/marker-gold.png', graphicHeight: 21, graphicWidth: 16});
	vectorLayer.addFeatures(feature);
	
	vectorLayer.events.register("mousedown", feature, markerClick);
	
	map.addLayer(vectorLayer);
}


////////////////////////////////////////////////////////////


//var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
//var feature = new OpenLayers.Feature.Vector(
//  new OpenLayers.Geometry.Point(lon=4215028, lat=7541110),
// {some:'data'},
// {externalGraphic: 'http://xepec.ru/openl/openlayers/img/marker-gold.png', graphicHeight: 21, graphicWidth: 16});
//vectorLayer.addFeatures(feature);
//map.addLayer(vectorLayer);


////////////////////////////////////////////////////////////////////////////////////////////////////




            map.addLayers([wms]);
            if(!map.getCenter())
                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
//            map.addControl(new OpenLayers.Control.Scale('scale'));
            map.addControl(new OpenLayers.Control.Permalink('permalink'));
            map.addControl(new OpenLayers.Control.MousePosition());
        }
    </script>
  </head>

<body onload="init()">
    <div id="map">
    </div>
<a href='#' onclick="map.setCenter(new OpenLayers.LonLat(4187888, 7509599), 12);">Место продажи водки копыловка</a><br>
<a href='#' onclick="map.setCenter(new OpenLayers.LonLat(4206000, 7492117), 12);">Здесь живу я</a><br>
<a href='#' onclick="map.setCenter(new OpenLayers.LonLat(4215028, 7541010), 12);">Место производства водки копыловка</a><br>
</body>
</html>
 
